<template>
  <div class="bus-container">
    <dialog-panel v-if="isShow">
      <div slot="header" class="dialog-header">
        <h3 class="title">带名字的插槽</h3>
        <button class="close">x</button>
      </div>
      <template slot="content">
        <div class="dialog-content">这是一个标准的 dialog 对话框</div>
      </template>
      <template slot="footer">
        <div class="dialog-footer">
          <el-button @click="close" type="primary" plain>取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </template>
    </dialog-panel>
  </div>
</template>
<script>
import DialogPanel from "./DialogPanel";
export default {
  name: "Bus",
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    close(){
      this.isShow = false;
    }
  },
  components: { DialogPanel }
};
</script>
<style lang="scss" scoped>
.bus-container {
  margin: 0 auto;
  width: 70em;
}
</style>
